<template>
    <div class="tabletoolbar_container">
      <div class="right_container">
        <!-- 操作 -->
        <slot></slot>
      </div>
      <div class="right_container">
        <el-tooltip class="item" effect="dark" content="视图设置" placement="top">
          <el-popover
            placement="bottom"
            width="130"
            trigger="click"
            v-model="visible"
          >
            <div class="table_cols_list">
              <!-- <draggable element="ul" v-model="colsList"> -->
                <div
                  class="table_cols_item"
                  v-for="(item, index) in colsList"
                  :key="index"
                >
                  <el-checkbox
                    v-model="item.show"
                    :disabled="item.disabled"
                    >{{ item.label }}</el-checkbox
                  >
                </div>
              <!-- </draggable> -->
              <div class="btn_footer" style="margin-top: 20px">
                <!-- <el-button type=""  @click="visible = false"
                  >取消</el-button
                > -->
                <el-button type="primary"  @click="handleSetView"
                  >保存</el-button
                >
              </div>
            </div>
  
            <el-button
              slot="reference"
              type="success"
              size="small"
              icon="el-icon-setting"
            ></el-button>
          </el-popover>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下载" placement="top">
          <el-button
            type="success"
            size="small"
            icon="el-icon-download"
            style="margin: 0 10px"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
  </template>
  
  
  
  <script>
  import _ from "lodash";
  import draggable from "vuedraggable";
  export default {
    components: {
      draggable,
    },
    props: {
      cols: {
        type: Array,
        default: () => {
          return [];
        },
      },
    },
    data() {
      return {
        visible: false,
        copyCols: [],
      };
    },
    computed: {
      colsList: {
        get() {
          return (this.copyCols = _.cloneDeep(this.cols));
        },
        set(newValue) {
          console.log(newValue)
          this.copyCols = newValue;
            this.$forceUpdate()
          
        },
      },
    },
    methods: {
      handleSetView() {
        console.log(this.colsList)
        this.$emit("handleSetView", this.copyCols);
        this.visible = false
      },
    },
  };
  </script>
  
  
  
  <style lang="scss" scoped>
  .tabletoolbar_container {
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    .left_container {
      width: 100%;
      text-align: left;
    }
    .right_container {
      width: 100%;
      text-align: right;
    }
  }
  </style>